import React, { useEffect, useState, useRef } from 'react';
import {
  CalendarOutlined,
  EllipsisOutlined,
  PlusOutlined,
} from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
import {
  Button,
  Dropdown,
  Switch,
  Row,
  Col,
  Tooltip,
  Popconfirm,
  message,
  Table,
} from 'antd';
import request from 'umi-request';
import { timestampToTime } from '@/utils';
import { useKey } from '@/hooks/index';
import { connect } from 'umi';
type GithubIssueItem = {
  url: string;
  id: number;
  number: number;
  title: string;
  labels: {
    name: string;
    color: string;
  }[];
  state: string;
  comments: number;
  created_at: string;
  updated_at: string;
  closed_at?: string;
};

function index(props: any) {
  // useEffect(() => {
  //   props.dispatch({ type: 'index/INIT' });
  // }, []);
  const columns: ProColumns<GithubIssueItem>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '楼盘名称',
      dataIndex: 'title',
      render: (item, info: any) => {
        // console.log(info, 'info');

        const img =
          info.rec_position == 1 ? (
            <img src="http://fangadmin.shbwyz.com/static/images/rec.png" />
          ) : (
            ''
          );
        return (
          <React.Fragment>
            {item}
            <Tooltip
              title={
                <img
                  src={`http://fangadmin.shbwyz.com/${info.img}`}
                  style={{ width: 200 }}
                />
              }
            >
              <CalendarOutlined />
            </Tooltip>
            {img}
          </React.Fragment>
        );
      },
    },

    {
      title: '价格',
      key: 'price',
      dataIndex: 'price',
      render: (item: any) => {
        return item == 0 ? (
          <span>待定</span>
        ) : item < 10 ? (
          <span>{item}万/套</span>
        ) : (
          <span>{item}元/㎡</span>
        );
      },
    },
    {
      title: '更新时间',
      key: 'create_time',
      dataIndex: 'create_time',
      render: (item) => {
        return timestampToTime(item);
      },
    },
    {
      title: '排序',
      dataIndex: 'ordid',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (item) => {
        return (
          <Switch
            defaultChecked
            checkedChildren="正常"
            unCheckedChildren="关闭"
            onChange={(checked: any) => {
              console.log('====================================');
              console.log(checked);
              console.log('====================================');
            }}
          />
        );
      },
    },

    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text, record, _, action) => {
        return (
          <React.Fragment>
            <Row>
              <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
                <Button size="small">户型</Button>
              </Col>
              <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
                <Button size="small">相册</Button>
              </Col>
              <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
                <Button size="small">动态</Button>
              </Col>
            </Row>
            <Row>
              <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
                <Button
                  size="small"
                  onClick={() => {
                    props.history.push(
                      '/homes/properties/management/Propertylist/sand',
                      {
                        // id: record.id,
                        state: { record },
                      },
                    );
                  }}
                >
                  沙盘
                </Button>
              </Col>
              <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
                <Button
                  size="small"
                  onClick={() => {
                    props.history.push(
                      '/homes/properties/management/Propertylist/editDetail',
                      {
                        // id: record.id,
                        state: { record },
                      },
                    );
                  }}
                >
                  编辑
                </Button>
              </Col>
              <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
                <Popconfirm
                  title="Delete the task"
                  description="Are you sure to delete this task?"
                  onConfirm={(e: any) => {
                    // console.log(e);
                    props.dispatch({
                      type: 'index/DEL_DATA',
                      payload: record,
                    });
                    message.success('Click on Yes');
                  }}
                  onCancel={(e: any) => {
                    // console.log(e);
                    message.error('Click on No');
                  }}
                  okText="Yes"
                  cancelText="No"
                >
                  <Button size="small">删除</Button>
                </Popconfirm>
              </Col>
            </Row>
          </React.Fragment>
        );
      },
    },
  ];

  const actionRef = useRef<ActionType>();
  return (
    <div>
      <ProTable<GithubIssueItem>
        columns={columns}
        rowSelection={{
          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
        }}
        actionRef={actionRef}
        cardBordered
        request={async (params = {}, sort, filter) => {
          console.log(sort, filter);
          return request<{
            data: GithubIssueItem[];
          }>('https://proapi.azurewebsites.net/github/issues', {
            params,
          });
        }}
        editable={{
          type: 'multiple',
        }}
        dataSource={props.fang_house}
        columnsState={{
          persistenceKey: 'pro-table-singe-demos',
          persistenceType: 'localStorage',
          onChange(value) {
            console.log('value: ', value);
          },
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        form={{
          // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
          syncToUrl: (values, type) => {
            if (type === 'get') {
              return {
                ...values,
                created_at: [values.startTime, values.endTime],
              };
            }
            return values;
          },
        }}
        pagination={{
          pageSize: 5,
          onChange: (page) => console.log(page),
        }}
        dateFormatter="string"
        headerTitle="高级表格"
        toolBarRender={() => [
          <Button key="button" icon={<PlusOutlined />} type="primary">
            新建
          </Button>,
          <Dropdown
            key="menu"
            menu={{
              items: [
                {
                  label: '1st item',
                  key: '1',
                },
                {
                  label: '2nd item',
                  key: '1',
                },
                {
                  label: '3rd item',
                  key: '1',
                },
              ],
            }}
          >
            <Button>
              <EllipsisOutlined />
            </Button>
          </Dropdown>,
        ]}
      />
    </div>
  );
}
const mapStateToProps = ({ index: { fang_house } }: any) => ({
  // console.log(fang_house, 'state');
  fang_house,
});

export default connect(mapStateToProps)(index);
